﻿// Allows the component to be highlighted on mouseover event
define([
'Xjs/core/util',
// Ensure the creation of the global Xjs
'Xjs/app'
],
function (util) {
    'use strict';

    var type = 'highlightable', // Use the type registration to avoid recreating the type
    Highlightable = Xjs.getType(type);

    if (Highlightable) { // It has been already loaded
        return Highlightable;
    }

    // Renders the html from a component
    Highlightable = util.define({

        type: type, // Set the type

        initialize: function (conf) {

            conf = conf || {};

            this.highlightable = conf.highlightable || this.highlightable;
            this.highlightCls = conf.highlightCls || this.highlightCls || 'w-highlighted';
            this.onHighlight = conf.onHighlight || this.onHighlight;
            this.onUnhighlight = conf.onUnhighlight || this.onUnhighlight;

            if (this.highlightable) {
                this.enableHighlightable();
            }
        },

        enableHighlightable: function () {


            var me = this;
            me.highlightable = true; // Redundant in case of initialize but needed if used outside of it
            me.ensureId(); // Needs to handle the mouse over and mouse out events

            // Register the events
            me.addHandler('onRender', function () {

                me.on('mouseover', function () {
                    me.highlight();
                });

                me.on('mouseout', function () {
                    me.unhighlight();
                });

            });
        },

        // Highlights the component
        highlight: function () {
            this.addClass(this.highlightCls);

            if (this.onHighlight) {
                this.onHighlight.call(this);
            }

            this.highlighted = true;
        },

        // Turns off the highlight of the component
        unhighlight: function () {
            this.removeClass(this.highlightCls);

            if (this.onUnhighlight) {
                this.onUnhighlight.call(this);
            }

            this.highlighted = false;
        }
    });

    Xjs.registerType(Highlightable);

    return Highlightable;
});